import React, { Suspense } from "react";
import { useRoutes } from "react-router-dom";

const Home = React.lazy(() => import("../views/home"));
const Detail = React.lazy(() => import("../views/detail"));
const Car = React.lazy(() => import("../views/car"));
const Layout = React.lazy(() => import("../layout"));




const routes = [
  {
    path: "/",
    element: <Layout></Layout>,
    children: [{
      path: '/',
      element: <Home></Home>,
    },{
      path: '/car',
      element: <Car></Car>,
    }]
  },
  {
    path: "/detail/:id",
    element: <Detail></Detail>,
  },
];

const RouterView = () => useRoutes(routes);
const Router = () => (
  <Suspense>
    <RouterView></RouterView>
  </Suspense>
);

export default Router;
